import { Color, Link, usePathname, type Href } from 'expo-router';
import { Toolbar } from 'expo-router/unstable-toolbar';
import { SymbolView } from 'expo-symbols';
import React, { use, useRef, useState } from 'react';
import {
  Text,
  Pressable,
  ScrollView,
  View,
  Switch,
  TextInput,
  useWindowDimensions,
} from 'react-native';

import { IsProtectedContext } from '../utils/contexts';

const HomeIndex = () => {
  const [isProtected, setIsProtected] = use(IsProtectedContext);
  const [shouldUseCustomXButton, setShouldUseCustomXButton] = useState(false);
  const pathname = usePathname();
  const { width } = useWindowDimensions();
  const textInputRef = useRef<TextInput>(null);
  const [isSearchFocused, setIsSearchFocused] = useState(false);

  return (
    <>
      <ScrollView
        style={{ flex: 1, backgroundColor: '#fff' }}
        contentContainerStyle={{ alignItems: 'center', gap: 16 }}
        contentInsetAdjustmentBehavior="automatic">
        <View>
          <Text>Home - Index</Text>
          <Text>Current Path: {pathname}</Text>
        </View>
        <CaseLink href="/modal" text="Modal" />
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
          <Text>Is protected?</Text>
          <Switch value={isProtected} onValueChange={setIsProtected} />
        </View>
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
          <Text>Use custom X button (JS Pressable)?</Text>
          <Switch value={shouldUseCustomXButton} onValueChange={setShouldUseCustomXButton} />
        </View>
        <CaseLink href="/protected" text="Protected" />
        <CaseLink
          href={{ pathname: '/test', params: { __internal_expo_router_no_animation: 1 } }}
          text="/test with animation disabled"
        />
        <CaseLink href="/test" text="test" />
        <CaseLink href="/timer" text="Timer with preload" prefetch />
        {Array.from({ length: 20 }).map((_, i) => (
          <CaseLink key={i} href={`/${i}`} text={`Go to ${i}`} />
        ))}
      </ScrollView>
      <Toolbar>
        <Toolbar.Spacer />
        <Toolbar.Button sf="magnifyingglass" tintColor={Color.ios.placeholderText} />
        <Toolbar.View style={{ width: width - 250 }}>
          <TextInput
            ref={textInputRef}
            onFocus={() => setIsSearchFocused(true)}
            onBlur={() => setIsSearchFocused(false)}
            placeholderTextColor={Color.ios.placeholderText}
            placeholder="Search"
          />
        </Toolbar.View>
        <Toolbar.Button sf="mic" tintColor={Color.ios.placeholderText} />
        {shouldUseCustomXButton ? (
          <Toolbar.View sharesBackground={false} style={{ width: 32, height: 32 }}>
            <Pressable
              onPress={() => {
                textInputRef.current?.clear();
                textInputRef.current?.blur();
              }}
              style={{
                width: '100%',
                height: '100%',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <SymbolView
                size={22}
                tintColor={Color.ios.label}
                style={{
                  width: 22,
                  height: 22,
                  transform: [{ rotate: isSearchFocused ? '45deg' : '0deg' }],
                }}
                name="plus"
              />
            </Pressable>
          </Toolbar.View>
        ) : (
          <>
            <Toolbar.Button hidden={isSearchFocused} sharesBackground={false} sf="plus" />
            <Toolbar.Button
              hidden={!isSearchFocused}
              sharesBackground={false}
              sf="xmark"
              onPress={() => {
                textInputRef.current?.clear();
                textInputRef.current?.blur();
              }}
            />
          </>
        )}
        <Toolbar.Spacer />
      </Toolbar>
    </>
  );
};

function CaseLink({ href, text, prefetch }: { href: Href; text: string; prefetch?: boolean }) {
  return (
    <Link href={href} asChild prefetch={prefetch}>
      <Pressable style={{ backgroundColor: 'rgb(11, 103, 175)', padding: 16, borderRadius: 8 }}>
        <Text style={{ color: '#fff' }}>{text}</Text>
      </Pressable>
    </Link>
  );
}

export default HomeIndex;
